<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            display: block;
        }
        
        .header-con,
        .content-con {
            width: 1099px;
            margin: 0 auto;
        }
        
        .header {
            height: 48px;
            background-color: #323232;
        }
        
        .header-con {
            height: 48px;
            background: #323232;
        }
        
        .header-con .box {
            height: 48px;
        }
        
        .header-con .box .pica {
            width: 183px;
            height: 116px;
            float: left;
            display: block;
            margin-right: 31px;
        }
        
        .box ul {
            width: 522px;
            height: 48px;
            float: left;
        }
        
        .box ul li {
            width: 87px;
            float: left;
            font-size: 13px;
            color: #a6a6a6;
            /* margin: 0 18px; */
            height: 48px;
            line-height: 48px;
            text-align: center;
            cursor: pointer;
        }
        
        .box ul li:hover {
            background-color: #dd4012;
            color: white;
        }
        
        .header-con .box .picb {
            float: right;
            width: 273px;
            height: 18px;
            display: block;
            margin-top: 15px;
        }
        
        .top {
            height: 221px;
            background: url(banner.jpg);
            position: relative;
            z-index: -2;
        }
        
        .top .black {
            height: 28px;
            background: #2c2f31;
            opacity: 0.5;
            position: absolute;
            bottom: 0;
            width: 100%;
            text-indent: 220px;
            color: #a6a6a6;
            font-size: 12px;
            line-height: 28px;
        }
        
        .content {
            background: #f0f1f1;
        }
        
        .content-con {
            background: #f0f1f1;
            overflow: hidden;
        }
        
        .content-con .head {
            width: 480px;
            margin-top: 25px;
        }
        
        .content-con .head li {
            width: 77px;
            height: 26px;
            background: #f0f1f1;
            margin-right: 5px;
            float: left;
            font-size: 12px;
            text-align: center;
            line-height: 26px;
            cursor: pointer;
        }
        
        .content-con .head li:hover {
            background: #636363;
            color: white;
        }
        
        #list {
            margin-top: 79px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        #list .listitem {
            width: 260px;
            height: 236px;
            background-color: #fff;
            margin-bottom: 33px;
            cursor: pointer;
        }
        
        #list .listitem dd {
            width: 260px;
            height: 80px;
        }
        
        #list .listitem dd b {
            display: block;
            width: 260px;
            height: 35px;
            border-bottom: 1px solid #f7f7f7;
            margin-top: 9px;
            padding-left: 15px;
            box-sizing: border-box;
        }
        
        #list .listitem dd p {
            width: 260px;
            height: 40px;
            font-size: 11px;
            color: #b2b1b1;
            margin-top: 8px;
            padding-left: 15px;
            box-sizing: border-box;
        }
        
        .choice {
            width: 255px;
            height: 36px;
            margin-left: 405px;
            margin-bottom: 41px;
            cursor: pointer;
        }
        
        .choice li:hover {
            background-color: #dd4012;
            color: white;
        }
        
        .choice li {
            width: 36px;
            height: 36px;
            background-color: #fff;
            text-align: center;
            line-height: 36px;
            margin: 0 3px;
            float: left;
            font-size: 10px;
            color: #bba9b1;
        }
        
        .box ul .select {
            background: #dd4012;
            color: white;
        }
        
        #template {
            display: none;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header-con">
            <div class="box">
                <img src="0.png" alt="" class="pica">
                <ul>
                    <li>网站首页</li>
                    <li>传悦资源</li>
                    <li class="select">传悦案例</li>
                    <li>传悦服务</li>
                    <li>解决方案</li>
                    <li>需求提交</li>
                </ul>
                <img src="16.png" alt="" class="picb">
            </div>
        </div>
    </div>
    <div class="top">
        <div class="black"> 网站首页>传悦案例</div>
    </div>
    <div class="content">
        <div class="content-con">
            <ul class="head">
                <li>全部</li>
                <li>网站建设</li>
                <li>推广运营</li>
                <li>品牌策划</li>
                <li>网络全案</li>
            </ul>
            <div id="list">
                <dl class="listitem" id="template">
                    <a href="host.html" style="color: #333;" target="_blank">
                        <dt><img src="" alt="" ></dt>
                        <dd>
                            <b>众德集团 网站建设</b>
                            <p>网站建设 品牌形象 整合营销 引导销售</p>
                        </dd>
                    </a>
                </dl>
            </div>
            <ul class="choice">
                <li>&lt;</li>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>&gt;</li>
            </ul>
        </div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
        let http = new XMLHttpRequest();
        http.open("get", "http://10.35.170.82:8080/getlist")
        http.send()
        http.onreadystatechange = function() {
            if (http.readyState === 4) {
                let data = JSON.parse(http.responseText)

                data.forEach(item => {
                    let newtem = $("#template").clone()
                    newtem.attr("id", "").find("b").html(item.b).find("p").html(item.p)
                    newtem.find("img").attr("src", item.img)
                    newtem.find("a").attr("href", `host.html?id=${item.id}`)
                    newtem.appendTo($("#list"))

                })
            }
        }
    </script>
</body>

</html>